<template>
  <div class="sidebar-container">
    <ul class="nav-menu">
      <li 
        v-for="item in menuItems" 
        :key="item.key"
        class="nav-item" 
        :class="{ active: modelValue === item.key }"
        @click="selectMenu(item.key)"
      >
        <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
        <span class="nav-label">{{ item.label }}</span>
        <span class="badge" v-if="item.key === 'notification' && unreadCount > 0">
          {{ unreadCount > 99 ? '99+' : unreadCount }}
        </span>
      </li>
    </ul>

    <div class="nav-bottom">
      <el-dropdown @command="handleCommand">
        <div class="more-menu">
          <el-icon><More /></el-icon>
          <span>更多</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item 
              v-for="item in dropdownItems" 
              :key="item.key"
              :command="item.key"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useNotificationStore } from '@/store/notification'
import { useUserStore } from '@/store/user'
import { 
  House, 
  EditPen, 
  Bell, 
  User, 
  More,
  Setting,
  Help,
  List,
  InfoFilled
} from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: 'discover'
  }
})

const emit = defineEmits(['update:modelValue', 'command'])

const router = useRouter()
const notificationStore = useNotificationStore()
const userStore = useUserStore()

// 定义菜单数据
const menuItems = [
  { key: 'discover', label: '发现', icon: House },
  { key: 'publish', label: '发布', icon: EditPen },
  { key: 'notification', label: '通知', icon: Bell },
  { key: 'profile', label: '我的', icon: User }
]

// 定义下拉菜单项
const dropdownItems = [
  { key: 'settings', label: '设置', icon: Setting },
  { key: 'help', label: '帮助与反馈', icon: Help },
  { key: 'about', label: '关于我们', icon: InfoFilled },
  { key: 'logout', label: '退出登录', icon: List }
]

// 获取未读通知数量
const unreadCount = computed(() => notificationStore.unreadCount)

const selectMenu = async (key) => {
  emit('update:modelValue', key)
  
  // 根据菜单项跳转到对应路由
  switch (key) {
    case 'discover':
      router.push('/')
      break
    case 'notification':
      // 标记通知为已读
      notificationStore.markAllAsRead()
      router.push('/notification')
      break
    case 'profile':
      // 确保即使API调用失败也使用默认数据
      try {
        await userStore.fetchCurrentUserInfo()
      } catch (error) {
        console.error('获取用户信息失败，使用默认数据', error)
      }
      router.push('/profile')
      break
    case 'publish':
      router.push('/publish')
      break
  }
}

const handleCommand = (command) => {
  emit('command', command)
}
</script>

<style lang="scss" scoped>
.sidebar-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-menu {
  flex: 1;
  padding: 0;
  margin: 0;
  list-style: none;
  
  .nav-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    position: relative;
    transition: all 0.2s ease;
    
    &:hover {
      background-color: #f7f7f7;
    }
    
    &.active {
      color: #ff2442;
      font-weight: 600;

      .nav-label {
        font-weight: 600;
      }
    }
    
    .el-icon {
      margin-right: 12px;
      font-size: 20px;
      width: 20px;
      height: 20px;
    }
    
    .nav-label {
      flex: 1;
    }
    
    .badge {
      margin-left: auto;
      background-color: #ff2442;
      color: white;
      font-size: 13px;
      padding: 2px 8px;
      border-radius: 12px;
      min-width: 20px;
      text-align: center;
      font-weight: 500;
    }
  }
}

.nav-bottom {
  padding: 16px 24px;
  
  :deep(.el-dropdown) {
    border: none !important;
    box-shadow: none !important;
  }
  
  .more-menu {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    transition: color 0.2s ease;
    border: none !important;
    padding: 0;
    
    &:hover {
      color: #666;
      background-color: #f7f7f7;
      padding: 8px 16px;
      margin: 0 -16px;
      border-radius: 6px;
    }
    
    .el-icon {
      margin-right: 12px;
      font-size: 20px;
      width: 20px;
      height: 20px;
    }
  }
}
</style>